<template>
  <page-header-wrapper :title="false">
    <a-card
      title="合同列表"
    >
      <template slot="extra">
        <a-button size="small" type="danger" @click="$router.push({ name: 'ContractDraft' })">前往草稿箱</a-button>
      </template>
      <!--      <a-tabs size="large" type="card" :tabBarGutter="5" @change="onTabs">-->
      <!--        <a-tab-pane key="1">-->
      <!--          <span slot="tab">-->
      <!--            待审 <a-badge count="25" />-->
      <!--          </span>-->
      <!--        </a-tab-pane>-->
      <!--        <a-tab-pane key="2">-->
      <!--          <span slot="tab">-->
      <!--            已审待启 <a-badge count="40" />-->
      <!--          </span>-->
      <!--        </a-tab-pane>-->
      <!--        <a-tab-pane key="3">-->
      <!--          <span slot="tab">-->
      <!--            审核中 <a-badge count="9" />-->
      <!--          </span>-->
      <!--        </a-tab-pane>-->
      <!--        <a-tab-pane key="0">-->
      <!--          <span slot="tab">-->
      <!--            全部合同 <a-badge count="69" />-->
      <!--          </span>-->
      <!--        </a-tab-pane>-->
      <!--      </a-tabs>-->
      <a-tabs type="card" @change="onTabs">
        <a-tab-pane v-for="(item, index) in contractTabs" :key="index" :tab="item"></a-tab-pane>
      </a-tabs>
      <div class="table-page-search-wrapper">
        <a-form-model :model="queryParam" layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-model-item label="合同编号">
                <a-input v-model="queryParam['filter[contract_no]']" placeholder="输入合同编号"/>
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-model-item label="业务名称">
                <a-input v-model="queryParam['filter[tm_name]']" placeholder="输入业务名称"/>
              </a-form-model-item>
            </a-col>
            <template v-if="advanced">
              <a-col :md="6" :sm="24">
                <a-form-model-item label="申请主体">
                  <a-input v-model="queryParam['filter[subject]']" placeholder="输入申请主体"/>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="联系电话">
                  <a-select
                    mode="multiple"
                    label-in-value
                    :value="phoneValues"
                    placeholder="输入客户电话（可多选）"
                    :filter-option="false"
                    @search="fetchPhone"
                    @change="handleChange"
                  >
                    <a-spin v-if="fetching" slot="notFoundContent" size="small" />
                    <a-select-option v-for="item in phoneSource" :key="item.value">
                      {{ item.text }}
                    </a-select-option>
                  </a-select>
                  <!--                  <a-input v-model="queryParam['filter[phone1]']" placeholder="输入联系电话"/>-->
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="有无尾款">
                  <a-select v-model="queryParam['filter[has_tail_tail_money]']" placeholder="请选择有无尾款">
                    <a-select-option v-for="(item, index) in moneyOpts" :key="index" :value="index">{{ item }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="转移合同">
                  <a-select v-model="queryParam['filter[contract_type]']" placeholder="请选择是否是转移合同">
                    <a-select-option v-for="(item, index) in typeOpts" :key="index" :value="index">{{ item }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </template>
            <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary" @click="toSearch">查询</a-button>
                <a-button style="margin-left: 8px" @click="reset">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'"/>
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div class="table-operator">
        <s-table
          bordered
          ref="table"
          :row-key="(record) => record.contract_id"
          :row-class-name="(record) => { if (record.status == '42') return 'not-check' }"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          :columns="contractList"
          :data="contractData"
        >
          <div v-if="isInvoice" slot="title">
            <a-button :disabled="selectedRowKeys.length === 0" size="small" type="primary" @click="getInvoice(selectedRowKeys)">发票合并申请</a-button>
            <a-divider type="vertical" />
            共选中<a style="font-size:16px;color:#f00;">{{ selectedRowKeys.length }}</a>条合同要开发票
          </div>
          <div
            slot="filterDropdown"
            slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
            style="padding: 8px"
          >
            <a-input
              v-ant-ref="c => (searchInput = c)"
              :placeholder="`搜索${column.title}`"
              :value="selectedKeys[0]"
              style="width: 188px; margin-bottom: 8px; display: block;"
              @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
              @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
            />
            <a-button
              type="primary"
              icon="search"
              size="small"
              style="width: 90px; margin-right: 8px"
              @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
            >
              搜索
            </a-button>
            <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
              重置
            </a-button>
          </div>
          <template slot="amount" slot-scope="text,record">
            <a-tag color="red">总金额：{{ text }}</a-tag>
            <a-tag color="red">代理费：{{ record.agency_fee }}</a-tag>
            <a-tag color="red">尾款：{{ record.tail_money }}</a-tag>
          </template>
          <template slot="status" slot-scope="text, record">
            <a-button v-if="text == 34 || text == 44" type="primary" size="small" @click="editStatus(record.contract_id)">{{ statusOpts[text] }} <a-icon type="form" /></a-button>
            <a-button v-else-if="text == 32 || text == 42" type="danger" size="small" @click="editStatus(record.contract_id)">{{ statusOpts[text] }} <a-icon type="form" /></a-button>
            <a-button v-else type="default" size="small" @click="editStatus(record.contract_id)">{{ statusOpts[text] }} <a-icon type="form" /></a-button>
          </template>
          <template slot="i_status" slot-scope="text">
            <div v-if="text == 1">已申请开票</div>
            <div v-else>未申请开票</div>
          </template>
          <template slot="action" slot-scope="text, record">
            <a-button v-if="isInvoice" type="primary" size="small" @click="getInvoice(record.contract_id)">申请发票</a-button>
            <a-button type="primary" size="small" @click="toDetail(record.contract_id)">查看</a-button>
            <a-popconfirm
              v-if="record.is_can_del == 1"
              title="是否删除"
              ok-text="确定"
              cancel-text="取消"
              @confirm="onDel(record.contract_id)"
            >
              <a-button type="danger" size="small">删除</a-button>
            </a-popconfirm>
            <a-button v-if="record.status == 44" type="danger" size="small" @click="$router.push({ name: 'BusinessList', params: { type: 'status2_1' } })">未开启业务</a-button>
          </template>
        </s-table>
      </div>
    </a-card>
    <a-modal
      title="编辑合同状态"
      v-model="visible"
      width="200px"
      :footer="null"
    >
      <a-row :gutter="[0,30]">
        <a-col :span="24">
          <a-radio-group name="radioGroup" v-model="status.selection">
            <a-radio :style="radioStyle" v-for="(item, index) in status.items" :key="index" :value="index">
              {{ item }}
            </a-radio>
          </a-radio-group>
        </a-col>
        <a-col :span="24" :style="{ textAlign: 'right' }">
          <a-button type="primary" @click="editSave">提交</a-button>
        </a-col>
      </a-row>
    </a-modal>
    <a-modal
      v-model="contractVisible"
      title="选择要做合同的客户"
      :width="500"
      @ok="onAddCustomer"
    >
      <a-form-model-item label="输入客户姓名">
        <a-input
          :data-source="dataSource"
          @search="onSearch"
        >
        </a-input>
      </a-form-model-item>
      <a-form-model-item label="输入联系电话">
        <a-input
          :data-source="dataSource"
          @search="onSearch"
        >
        </a-input>
      </a-form-model-item>
    </a-modal>
    <a-modal
      destroy-on-close
      title="填写发票信息"
      v-model="invoiceVisible"
      :width="700"
      :mask-closable="false"
      @ok="onSubmit"
    >
      <a-form-model
        ref="ruleForm"
        :model="invoiceForm"
        :rules="invoiceRules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="选择开票公司" prop="company_id">
          <a-select
            show-search
            placeholder="选择开票公司"
            v-model="invoiceForm.company_id"
            :filter-option="filterOption"
            @change="onChange"
          >
            <a-select-option :disabled="item.stock == 0" v-for="item in companyOpts" :key="item.id" :value="item.id">{{ item.company_name }}(税点{{ item.tax_point }}%)(余票{{ item.stock }})</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-divider orientation="left">填写纳税人信息</a-divider>
        <a-form-model-item label="开票附件" prop="file_url">
          <a-upload
            accept=".docx,.doc"
            name="file"
            :multiple="true"
            :action="uploadUrl"
            :headers="header"
            @change="uploadChange"
          >
            <a-button> <a-icon type="upload" />附件</a-button>
            <a-button size="small" type="link" icon="download" @click="download">点击下载发票模版</a-button>
          </a-upload>
        </a-form-model-item>
<!--        <a-form-model-item label="抬头类型" prop="header_type">-->
<!--          <a-radio-group v-model="invoiceForm.header_type">-->
<!--            <a-radio v-for="(item,index) in headerOpts" :key="index" :value="index" :disabled="index == 10 && invoiceForm.invoice_type == 20">-->
<!--              {{ item }}-->
<!--            </a-radio>-->
<!--          </a-radio-group>-->
<!--        </a-form-model-item>-->
<!--        <a-form-model-item label="发票抬头" prop="header">-->
<!--          &lt;!&ndash;          <template slot="help">&ndash;&gt;-->
<!--          &lt;!&ndash;            <span style="color:#999">无需填写，与合同基本信息一致</span>&ndash;&gt;-->
<!--          &lt;!&ndash;          </template>&ndash;&gt;-->
<!--          <a-input v-model="invoiceForm.header" placeholder="输入发票抬头" />-->
<!--        </a-form-model-item>-->
<!--        <a-form-model-item label="发票类型" prop="invoice_type">-->
<!--          <template slot="help">-->
<!--            <span style="color:#999">无需填写，选择开票时自动选择</span>-->
<!--          </template>-->
<!--          <a-radio-group disabled v-model="invoiceForm.invoice_type" name="radioGroup">-->
<!--            <a-radio v-for="(item,index) in typeOpts" :key="index" :value="index">{{ item }}</a-radio>-->
<!--          </a-radio-group>-->
<!--        </a-form-model-item>-->
<!--        <a-form-model-item label="统一社会信用代码" prop="social_code">-->
<!--          <a-input v-model="invoiceForm.social_code" placeholder="输入统一社会信用代码" />-->
<!--        </a-form-model-item>-->
<!--        <a-form-model-item label="开户银行名称" prop="bank_name">-->
<!--          <a-input v-model="invoiceForm.bank_name" placeholder="输入开户银行名称" />-->
<!--        </a-form-model-item>-->
<!--        <a-form-model-item label="基本开户账号" prop="account_num">-->
<!--          <a-input v-model="invoiceForm.account_num" placeholder="输入基本开户账号" />-->
<!--        </a-form-model-item>-->
<!--        <a-form-model-item label="注册场所地址" prop="register_address">-->
<!--          <a-input v-model="invoiceForm.register_address" placeholder="输入注册场所地址" />-->
<!--        </a-form-model-item>-->
<!--        <a-form-model-item label="注册固定电话" prop="register_phone">-->
<!--          <a-input v-model="invoiceForm.register_phone" placeholder="输入注册固定电话" />-->
<!--        </a-form-model-item>-->
        <a-form-model-item label="申请备注" prop="notes">
          <a-textarea v-model="invoiceForm.notes" placeholder="输入申请备注"></a-textarea>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal
      centered
      title="添加客户资源"
      v-model="addVisible"
      :width="600"
    >
      <a-form-model
        ref="addForm"
        :model="addCustomerForm"
        :rules="addRules"
      >
        <a-row :gutter="40">
          <a-col :span="12">
            <a-form-model-item label="客户来源" prop="source">
              <a-select v-model="addCustomerForm.source">
                <a-select-option v-for="(item,index) in sourceOpts" :key="index" :value="index">{{ item }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="客户姓名" prop="customer_name">
              <a-input v-model="addCustomerForm.customer_name" type="text" placeholder="输入客户姓名" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="状态标记" prop="customer_status">
              <a-select v-model="addCustomerForm.customer_status">
                <a-select-option v-for="(item,index) in statusOpts" :key="index" :value="index">{{ item }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="联系电话1" prop="phone">
              <a-input v-model="addCustomerForm.phone" type="text" placeholder="输入联系电话" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="注册名称" prop="tm_name">
              <a-input v-model="addCustomerForm.tm_name" type="text" placeholder="输入商标名称/专利名称/其他" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="联系电话2">
              <a-input v-model="addCustomerForm.phone2" type="text" placeholder="输入联系电话" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="申请主体" prop="subject_of_application">
              <a-input v-model="addCustomerForm.subject_of_application" type="text" placeholder="输入申请主体" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="客户微信" prop="wechat">
              <a-input v-model="addCustomerForm.wechat" type="text" placeholder="请输入客户微信号" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="行业">
              <a-input v-model="addCustomerForm.industry" type="text" placeholder="请输入客户所属行业" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="邮箱">
              <a-input v-model="addCustomerForm.email" type="text" placeholder="请输入客户邮箱" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="备注" prop="notes">
              <a-textarea v-model="addCustomerForm.notes" :rows="4"></a-textarea>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
  import storage from 'store'
  import { STable } from '@/components'
  import {
    getList,
    getStatus,
    editStatus,
    delContract,
    getAddInvoice,
    postAddInvoice,
    getPhoneArray
  } from '@/api/contract'
  import col from '@/columns/contract'
  import { CURRENT_COMPANY, ACCESS_TOKEN } from '@/store/mutation-types'
  import apis from '@/api'
  const currentCompany = storage.get(CURRENT_COMPANY)

  export default {
    components: {
      STable
    },
    name: 'ContractList',
    data () {
      const validateUrl = (rule, value, callback) => {
        if (value === '') {
          return callback(new Error('必须上传发票模版'))
        } else {
          callback()
        }
      }
      return {
        currentCompany,
        labelCol: { span: 8 },
        wrapperCol: { span: 12 },
        contractList: col.all,
        contractData: parameters => {
          return getList(Object.assign(parameters, this.queryParam, this.activeKey)).then(res => {
            this.contractTabs = res.result.tab2_opts
            this.moneyOpts = res.result.has_tail_tail_money_opts
            this.statusOpts = res.result.status_opts
            this.typeOpts = res.result.contract_type_opts
            this.contractOpts = res.result.contract_type_opts
            return res.result
          })
        },
        visible: false,
        activeKey: 0,
        contractTabs: [],
        moneyOpts: [],
        typeOpts: [],
        statusOpts: [],
        contractOpts: [],
        advanced: true,
        queryParam: {},
        status: {},
        radioStyle: {
          display: 'block',
          height: '30px',
          lineHeight: '30px'
        },
        contractVisible: false,
        dataSource: [],
        invoiceVisible: false,
        invoiceForm: {
          file_url: ''
        },
        headerOpts: {
          '1': '个人',
          '2': '企业'
        },
        companyOpts: {},
        invoiceRules: {
          company_id: [{ required: true, message: '必须选择开票公司', trigger: 'change' }],
          file_url: [{ validator: validateUrl, trigger: 'change' }]
        },
        // invoiceRules1: {
        //   company_id: [{ required: true, message: '必须选择开票公司', trigger: 'change' }],
        //   header_type: [{ required: true, message: '必须选择抬头类型', trigger: 'change' }],
        //   header: [{ required: true, message: '必须填写发票抬头', trigger: 'blur' }],
        //   invoice_type: [{ required: true, message: '必须选择发票类型', trigger: 'change' }],
        //   social_code: [{ required: true, message: '必须填写统一信用代码证', trigger: 'blur' }]
        // },
        // invoiceRules2: {
        //   company_id: [{ required: true, message: '必须选择开票公司', trigger: 'change' }],
        //   header_type: [{ required: true, message: '必须选择抬头类型', trigger: 'change' }],
        //   header: [{ required: true, message: '必须填写发票抬头', trigger: 'blur' }],
        //   invoice_type: [{ required: true, message: '必须选择发票类型', trigger: 'change' }],
        //   bank_name: [{ required: true, message: '必须填写开户行', trigger: 'blur' }],
        //   social_code: [{ required: true, message: '必须填写统一信用代码证', trigger: 'blur' }],
        //   account_num: [{ required: true, message: '必须填写银行账户', trigger: 'blur' }],
        //   register_address: [{ required: true, message: '必须填写地址', trigger: 'blur' }],
        //   register_phone: [{ required: true, message: '必须填写联系电话', trigger: 'blur' }]
        // },
        inTypeOpts: {
          '1': '普通增值税发票',
          '2': '专用增值税发票'
        },
        addVisible: false,
        addCustomerForm: {},
        addRules: {
          customer_name: [ { required: true, message: '请输入客户姓名', trigger: 'blur' } ],
          source: [ { required: true, message: '请选择客户来源', trigger: 'change' } ],
          customer_status: [ { required: true, message: '选择标记状态', trigger: 'change' } ],
          phone: [
            { required: true, message: '请输入客户联系电话', trigger: 'blur' },
            { pattern: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }
          ],
          subject_of_application: [ { required: true, message: '请输入申请主体', trigger: 'blur' } ],
          tm_name: [ { required: true, message: '请输入注册名称', trigger: 'blur' } ],
          wechat: [ { required: true, message: '请输入微信号', trigger: 'blur' } ]
        },
        sourceOpts: {},
        selectedRowKeys: [],
        phoneSource: [],
        phoneValues: [],
        fetching: false,
        isInvoice: true,
        header: {
          'Access-Token': storage.get(ACCESS_TOKEN)
        },
        uploadUrl: apis.Upload
      }
    },
    created () {
      if (this.currentCompany === 'zy' || this.currentCompany === 'jh') {
        this.isInvoice = false
      }
    },
    methods: {
      onTabs (key) {
        const query = {}
        query['filter[tab]'] = key
        this.activeKey = query
        this.$refs.table.refresh(true)
      },
      toDetail (id) {
        this.$router.push({ name: 'ContractDetail', params: { cid: id } })
      },
      onDel (id) {
        delContract(id).then(res => {
          if (res.status === 0) {
            this.$refs.table.refresh()
          } else {
            this.$warning({
              title: res.msg
            })
          }
        })
      },
      editStatus (id) {
        const app = this
        app.status.contract_id = id
        getStatus(id).then(res => {
          if (res.status === 0) {
            app.status.items = res.result.items
            app.status.selection = (res.result.selection).toString()
            this.visible = true
          } else {
            app.$error({
              title: '警告',
              content: res.msg
            })
          }
        })
      },
      editSave () {
        const app = this
        editStatus(app.status.contract_id).then(res => {
          if (res.status === 0) {
            app.$refs.table.refresh()
            app.visible = false
          } else {
            app.$error({
              title: '警告',
              content: res.msg
            })
          }
        })
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      addContract () {
        this.contractVisible = true
      },
      onSearch () {
        this.dataSource = ['马婷', '马婷婷', '马婷婷1']
      },
      handleSearch (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
      },
      handleReset (clearFilters) {
        clearFilters()
        this.searchText = ''
      },
      reset () {
        this.queryParam = {}
        this.selectedRowKeys = []
        this.phoneValues = []
        this.$refs.table.refresh(true)
      },
      filterOption (input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      },
      getInvoice (id) {
        const app = this
        const parameter = {}
        app.invoiceForm = {}
        parameter['contract_id'] = id
        app.invoiceForm['contract_id'] = id
        if (app.selectedRowKeys.length > 0) {
          app.$confirm({
            title: '本次申请发票包含' + app.selectedRowKeys.length + '条合同',
            onOk: () => {
              getAddInvoice(parameter).then(res => {
                app.companyOpts = res.result.company_data
                app.invoiceVisible = true
              })
            }
          })
        } else {
          getAddInvoice(parameter).then(res => {
            // app.invoiceForm.header = res.result.subject
            app.companyOpts = res.result.company_data
            // app.headerOpts = res.result.header_type_opts
            // app.typeOpts = res.result.invoice_type_opts
            app.invoiceVisible = true
          })
        }
      },
      onSubmit () {
        const app = this
        const parameter = {}
        const data = {}
        parameter['contract_id'] = app.invoiceForm['contract_id']
        app.$refs.ruleForm.validate(valid => {
          if (valid) {
            for (const k in app.invoiceForm) {
              data['invoice[' + k + ']'] = app.invoiceForm[k]
            }
            postAddInvoice(data, parameter).then(res => {
              if (res.status === 0) {
                app.invoiceVisible = false
                app.$refs.table.refresh(true)
                app.selectedRowKeys = []
              } else {
                app.$warning({
                  title: res.msg
                })
              }
            })
          } else {
            return false
          }
        })
      },
      onChange (value) {
        const id = this.invoiceForm.contract_id
        this.invoiceForm = {}
        const type = this.companyOpts.find(event => event.id === value)
        this.invoiceForm.invoice_type = (type.invoice_type).toString()
        this.invoiceForm.company_id = value
        this.invoiceForm.contract_id = id
      },
      onAddCustomer () {
        this.$confirm({
          title: '未找到客户信息,是否新建',
          onOk: () => {
            this.addVisible = true
          }
        })
      },
      onSelectChange (selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
      },
      fetchPhone (value) {
        const app = this
        app.phoneSource = []
        app.fetching = true
        getPhoneArray(value).then(res => {
          const source = res.result.data.map(phone => ({
            text: phone,
            value: phone
          }))
          app.phoneSource = source
          app.fetching = false
        })
      },
      handleChange (value) {
        this.phoneValues = value
      },
      uploadChange (info) {
        if (info.file.status === 'done') {
          this.invoiceForm['file_url'] = info.file.response.result.url
          this.invoiceForm['filename'] = info.file.name
        }
      },
      toSearch () {
        const data = []
        if (this.phoneValues.length !== 0) {
          for (const k in this.phoneValues) {
            data.push(this.phoneValues[k].key)
          }
        }
        this.queryParam['phone'] = data
        this.$refs.table.refresh(true)
      },
      download (url) {
        window.open('https://design-upload.oss-cn-beijing.aliyuncs.com/template.docx')
      }
    }
  }
</script>

<style>
  .ant-table-tbody > tr.not-check {
    background-color: rgba(255,0,0,.3);
  }
</style>
